<div class="container">
  <div class="col-md-4 col-md-offset-4">
    <div id="signin-pannel" class="signin-pannel">
      <div class="form-group form-group-lg">
        <input class='form-control' id='name' name='name' size='30' type='text' v-model="username" placeholder="账号"/>
      </div>
      <div class='form-group form-group-lg'>
        <input class='form-control' id='pass' name='pass' size='30' type='password' v-model="password" placeholder="密码"/>
      </div>
      <input type='hidden' name='_csrf' value='<%= csrf %>'/>
      <button class='btn btn-primary btn-lg btn-block' v-on:click="submit">登录</button>
      <a class="btn btn-link" href='<%= apiPrefix.page %>/user/searchPasswordFromMail'>通过邮箱找密码?</a>
    </div>
  </div>
</div>
<script>
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';

  var vue = new Vue({
    el: '#app',
    data: {
      username: '',
      password: '',
      errorMsg: ''
    },
    methods: {
      submit: function(event) {
        $.post( dataPrefix + '/user/signin',
          { appId: appId,
            _csrf: $('#_csrf').val(),
            loginname: this.username,
            password: this.password
          },
          function (result) {
            if (result.err) {
              vue.errorMsg = result.err;
            } else {
              var { user } = result.data
              if (user && user.active) {
                location.href =  pagePrefix + '/?appId=' + appId;
              } else {
                vue.errorMsg = '您的账号未激活';
              }
            }
        });
      }
    }
  });

</script>
